<template>
	<view>
		
		<van-search v-model="value" show-action	 :clearable="false" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
		
		<van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功" loading-text="正在加载数据">
		  <view class="product_content">
		  	<productList :proList="productData"></productList>
		  </view>
		</van-pull-refresh>
		
		
	</view>
</template>

<script>
	import {ref,onMounted, onUnmounted} from 'vue';
	import productList from '../../components/productList/productList.vue'
	
	import { showToast } from 'vant';

	export default {
		components:{productList},
		setup() {
			const value = ref('');
			const productData = ref ([]);
			 const loading = ref(false);
			 
			 const onRefresh = () => {
				 productData.value = []
				  showToast({
					  duration:500,
					  message:'正在加载...',
					  forbidClick:true
				  });
				  setTimeout(() =>{
					  let count = Math.floor(Math.random() * 31)
					  getProList(count === 0 ? 1 : count)		  
					 loading.value = false 
				  },1000)
			};
			 
			const onSearch = (val) => {
				productData.value = productData.value.filter(item =>{
					return item.title.match(new RegExp(val,'g'))
				})		
			}
			const onCancel = () =>{
				productData.value = []
				getProList(20)
			}
			const getProList = (sum)=>{
				for(let i=0;i<sum;i++){
					productData.value.push({
						id:i,
						title:`减压增肌训练${i + 1 }号`,
						content:'K3有基础 30min',
						amount: i + '人在训练',
						type:'健身官方课程',
						desc:'持续打卡·有奖品运动'
					})
				}
			}
			
			onMounted (()=>{
				getProList(20)	
			})
	
			
			return {
				value,
				loading,
				onSearch,
				onCancel,
				productData,
				getProList,
				onRefresh
			};
		}
	}
</script>

<style lang="scss" scoped>
	.product_content{
		min-height: 100vh;
		padding: 0 12px;
		padding-bottom: 10px;
	}

</style>